<template>
	<view >

		<view v-show="maskflag">
			<swiper class="swiper" vertical :interval="interval" :duration="duration" @change="change"
				@animationfinish="animationfinish">
				<!-- @touchmove.stop='stopTouchMove' -->
				<swiper-item :key="index" v-for="(item,index) in list">
					<view class="swiper-item ">
			
						<image class="musicbg" src="https://public-read-shengmu.oss-cn-beijing.aliyuncs.com/image/music.png"
							:class="[muteBgMusic ? '' : 'music']" @click="playMusic" mode="aspectFill"></image>
						<view class="img">
			
							<image class="img1" :src="item.src+'?v='+new Date()" mode="widthFix">
							</image>
			
							<view class="mask2024" v-if="index==7">
								<u-form label-position="top" :model="form" ref="uForm">
			
									<u-form-item class="textarea" :border-bottom="false" prop="intro2023">
										<u-input :auto-height="false" :height="height" maxlength="2000" :clearable="false"
											placeholder="请您对2023年的自己说句话吧？" type="textarea" v-model="form.intro2023" />
									</u-form-item>
									
									<u-form-item class="textarea" :border-bottom="false" prop="intro2024">
										<u-input :auto-height="false" :height="height" placeholder="请写下你的2024新年愿望，奔赴远方，心向往之，脚踏实地，梦在不远处等待!" maxlength="2000"
											:clearable="false" type="textarea" v-model="form.intro2024" />
									</u-form-item>
								</u-form>
								<view class="btns" @click="submit2024">
									<text>提交</text>
								</view>
							</view>
							<!-- <view @touchmove.stop='stopTouchMove' v-if="index==7 && !flag" class="mask2024">
								<u-form label-position="top" :model="form" ref="uForm">
			
									<u-form-item class="textarea" :border-bottom="false" prop="intro2023">
										<u-input :auto-height="false" :height="height" maxlength="2000" :clearable="false"
											placeholder="请您对2023年的自己说句话吧？" type="textarea" v-model="form.intro2023" />
									</u-form-item>
									
									<u-form-item class="textarea" :border-bottom="false" prop="intro2024">
										<u-input :auto-height="false" :height="height" placeholder="请写下你的2024新年愿望，奔赴远方，心向往之，脚踏实地，梦在不远处等待!" maxlength="2000"
											:clearable="false" type="textarea" v-model="form.intro2024" />
									</u-form-item>
								</u-form>
								<view class="btns" @click="submit2024">
									<text>提交</text>
								</view>
							</view> -->
			
							<view v-if="index==6" class="bgs1">
								<view class="imgbox">
									<!-- <image
										:src="'https://public-read-shengmu.oss-cn-beijing.aliyuncs.com/image/ZWWL/13.png?v='+new Date()"
										mode=""></image> -->
									<image
										:src="'https://public-read-shengmu.oss-cn-beijing.aliyuncs.com/image/ZWWL/16.png?v='+new Date()"
										mode=""></image>
								</view>
			
							</view>
			
							<!-- <view v-if="index==8" class="mask">
								<u-form label-position="top" :model="form1" ref="uForm1">
									<u-form-item class="textarea" :border-bottom="false" prop="intro">
										<u-input :auto-height="false" :height="height" placeholder="请写下你的2024新年愿望，奔赴远方，心向往之，脚踏实地，梦在不远处等待!" maxlength="2000"
											:clearable="false" type="textarea" v-model="form1.intro" />
									</u-form-item>
								</u-form>
								<view class="btns" @click="submit2024"><text>提交</text></view>
							</view> -->
							<view class="mask dif" v-if="index==8" style="font-size: 14px;">
								感谢您
								<text style="color: #f7e57f; padding: 0 5px; font-size: 16px;">{{info && info.name}}</text>
								<view class="info" style="padding-top: 20px;">
									您的反馈对我们来说非常重要，感谢您的配合和参与
								</view>
							</view>
							<view v-if="index!=list.length -1" class="ups"></view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="info" v-show="!maskflag">
			请在手机钉钉内部打开
		</view>
	</view>
</template>



<script>
	export default {

		data() {
			return {
				muteBgMusic: false, //静音
				flag: false,
				height: 300,
				form: {
					intro2023:"",
					intro2024: '',
				},

				form1: {

				},

				list: [
					{

						src: "https://public-read-shengmu.oss-cn-beijing.aliyuncs.com/image/ZWWL/10.jpg"
					},

					{
						src: "https://public-read-shengmu.oss-cn-beijing.aliyuncs.com/image/ZWWL/1.jpg"
					},

					{
						src: "https://public-read-shengmu.oss-cn-beijing.aliyuncs.com/image/ZWWL/2.jpg"
					},
					{
						src: "https://public-read-shengmu.oss-cn-beijing.aliyuncs.com/image/ZWWL/7.jpg"
					},

					{
						src: "https://public-read-shengmu.oss-cn-beijing.aliyuncs.com/image/ZWWL/5.jpg"
					},
					// {
					// 	src: "https://public-read-shengmu.oss-cn-beijing.aliyuncs.com/image/ZWWL/3.jpg"
					// },

					{
						src: "https://public-read-shengmu.oss-cn-beijing.aliyuncs.com/image/ZWWL/8.jpg"
					},
					{
						src: "https://public-read-shengmu.oss-cn-beijing.aliyuncs.com/image/ZWWL/9.jpg"
					},
					{
						src: "https://public-read-shengmu.oss-cn-beijing.aliyuncs.com/image/ZWWL/4.jpg"
					},
					{
						src: "https://public-read-shengmu.oss-cn-beijing.aliyuncs.com/image/ZWWL/66.jpg"
					},
				],
				current: 0,
				interval: 2000,
				duration: 500,
				ddCode: "10550c9aeedd334ab319a4207cda99f5",
				info: null
				// info:{
				// 	name:'张安'
				// }
			};
		},

		watch: {
			muteBgMusic(newValue, oldValue) {
				if (newValue) {
					// 开启静音
					this.$music.playBgm({
						mute: true
					});
				} else {
					// 关闭 静音
					this.$music.playBgm({
						mute: false
					});
				}
			}
		},
		onLoad() {
			
			// 判断是否是 或钉钉浏览器代码
			let ua = window.navigator.userAgent.toLowerCase();
						
			if (!ua.match(/ding\s?talk/i)) {
			   uni.showToast({
			   	icon:"none",
				title:'请在手机钉钉内部打开'
			   })
			   this.maskflag = false  //记得该回去
			    // this.maskflag = true
			   return
			} else{
				this.maskflag = true
			}
			setTimeout(() => {
				this.ddCode = localStorage.getItem('ddCode5')
				console.log(this.ddCode, '我是从缓存过来的');
				const values = uni.getStorageSync('ddinfo2');
				if (values) {
					this.info = values
				} else {
					this.$u.api.getUserinfo({
						code: this.ddCode
					}).then(res => {
						this.info = res.result
						uni.setStorageSync('ddinfo2', res?.result);
						console.log(this?.info, 555555);
					})
				}
			}, 4000)
		},
		methods: {
			
			

			//点击是否静音  由于ios不能自动播放，所以我统一安卓 iOS 双端需要手动点击开始播放
			//如果想打开页面就播放，只需在music.js中 把默认值改为false, 并且设置自动播放即可
			playMusic() {
				this.muteBgMusic = !this.muteBgMusic;
			},
			stopTouchMove(e) {
				if (!this.form.intro) {
					this.$u.toast('请先填写内容')
					return false
				}
			},
			sub(year, content) {
				this.$u.api.addWisData({
					userid: this.info.userid,
					"realname": this.info.name, //姓名
					"tell": this.info.mobile, //电话
					"cxtType": year, //类型:2023 ,2024
					content, //内容
					"avatar": this.info.avatar //头像

				}).then(res => {
					this.$u.toast('提交成功')

					// if (year == 2023) {
					// 	this.flag = !this.flag

					// }
				})
			},
			submit2023() {
				
			
				

				if (!this.form.intro2023) {
					this.$u.toast('2023请您对2023年的自己说句话吧？')
					return
				}
				this.sub('2023', this.form.intro2023)


			},
			submit2024() {
				
				if (!this.form.intro2023) {
					this.$u.toast('2023请您对2023年的自己说句话吧？')
					return
				}
				this.sub('2023', this.form.intro2023)
				if (!this.form.intro2024) {
					this.$u.toast('请写下你的2024新年愿望，奔赴远方，心向往之，脚踏实地，梦在不远处等待!')
					return
				}
				this.sub('2024', this.form.intro2024)

			},
			change(e) {
				// console.log(e,4444444444444);
				// console.log(e.detail.current);
				// if(e.detail.current==6){
				// 	if (!this.form.intro) {
				// 		this.$u.toast('2023年你想说的话？')
				// 	}

				// 	return 
				// }
			},


			animationfinish(e) {



				this.current = e.detail.current;

			}
		}
	}
</script>


<style>
	page {
		height: 100vh;
		overflow: hidden;
		background: #0d0b10;
	}
</style>
<style lang="scss">
	.mask2024{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 9;
		color: #fff;
		padding: 100rpx 32rpx 0;
		
	}
	.info{
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 16px
	}
	.musicbg {
		position: fixed;
		width: 35px;
		height: 35px;
		right: 20rpx;
		top: 20rpx;
		z-index: 9999;

		&.music {
			animation: music 2.5s linear 0s infinite normal none;
		}
	}




	@keyframes music {
		0% {
			transform: rotate(0deg);
		}

		10% {
			transform: rotate(36deg);
		}

		20% {
			transform: rotate(72deg);
		}

		30% {
			transform: rotate(108deg);
		}

		40% {
			transform: rotate(144deg);
		}

		50% {
			transform: rotate(180deg);
		}

		60% {
			transform: rotate(216deg);
		}

		70% {
			transform: rotate(252deg);
		}

		80% {
			transform: rotate(288deg);
		}

		90% {
			transform: rotate(324deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.btns {
		width: 382rpx;
		height: 86rpx;
		background: linear-gradient(180deg, #fff4d8 0%, #ffa660 100%);
		box-shadow: 0px 2rpx 8rpx 0px #d58a50;
		border-radius: 86rpx;
		opacity: 1;
		border: none;
		outline: none;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20px auto;

		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #481a0d;
	}

	/deep/ .u-hairline-border[data-v-6e15e680]:after {
		border: none !important;
	}

	/deep/ .u-form-item--left {
		color: #fff;
	}

	/deep/ .u-input__textarea {
		background: rgba(247, 213, 165, .2);
		border-radius: 5px;
		padding: 15px;
		// height: 300rpx !important;
		color: #fff;
		overflow-y: auto;
	}

	.ups {
		width: 56px;
		height: 62px;
		background-size: 100%;
		z-index: 100;
		background: url("../../../static/up.png") no-repeat;
		animation: up 1s ease-in infinite;
		-moz-animation: up 1s ease-in infinite;
		-webkit-animation: up 1s ease-in infinite;
		position: absolute;
		left: 0;
		bottom: 10px;
		left: 50%;
		margin-left: -28px;
	}

	@keyframes up {
		0% {
			transform: translateY(0);
			opacity: 0
		}

		50% {
			transform: translateY(-20px);
			opacity: 1
		}

		100% {
			transform: translateY(-40px);
			opacity: 0
		}
	}

	@-webkit-keyframes up {
		0% {
			-webkit-transform: translateY(0);
			opacity: 0
		}

		50% {
			-webkit-transform: translateY(-20px);
			opacity: 1
		}

		100% {
			-webkit-transform: translateY(-40px);
			opacity: 0
		}
	}

	.swiper {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background: #0d0b10;

		.swiper-item {
			height: 100vh;
			height: 100vh;
			position: relative;

			.img {
				width: 100%;
				height: 100%;
			}

			.img1 {
				width: 100%;
				height: 100vh !important;
			}

			.bgs1 {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				z-index: 9;

				.imgbox {
					position: absolute;
					bottom: 80px;
					left: 40px;
					right: 40px;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					image {
						width: 80px;
						height: 192px;
						// -webkit-animation: shake 10s infinite;
						// animation: zy 1s .05s linear infinite;
						
						
						// -webkit-transform-origin: 50% 100%;
						// transform-origin: 50% 100%;
					}
				}
			}

			
			@keyframes zy{
			  10% {
			    transform: rotate(15deg);
			  }
			  20% {
			    transform: rotate(-10deg);
			  }
			  30% {
			    transform: rotate(5deg);
			  }
			  40% {
			    transform: rotate(-5deg);
			  }
			  50%,100% {
			    transform: rotate(0deg);
			  }
			}
			

			.mask {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				z-index: 9;
				color: #fff;
				padding: 500rpx 32rpx 0;

				&.dif {
					padding: 250rpx 32rpx 0;
				}
			}
		}
	}
</style>
